<!--
  公用导入弹窗，包含’模板下载‘、’excel导入‘功能
 -->
<template>
  <a-image-preview-group
    v-model:visible="visible"
    v-model:current="currentLocal"
    infinite
    :src-list="imageLisLocal"
    @visible-change="handleChange"
  />
</template>

<script lang="ts" setup>
import { ref, withDefaults, defineProps } from 'vue';
import { isImage } from '@/utils/fileType';

interface Props {
  imageList: string[]; // 弹窗标题
  imageItemType: 'string' | 'object'; // 弹窗标题
  imageUrlKey: string;
  current?: number;
  currentImg?: string;
  filterNotImage?: boolean;
  close: () => void;
  resolve: () => void;
}

const props = withDefaults(defineProps<Props>(), {
  imageList: () => {
    return [];
  },
  imageItemType: 'string',
  imageUrlKey: 'url',
  filterNotImage: true,
  current: 0,
  close: () => {
    return () => {};
  },
  resolve: () => {
    return () => {};
  },
});

const type = '';
const visible = ref(true);
const currentLocal = ref(0);
const imageLisLocal = ref<any[]>([]);

const getCurrent = () => {
  if (props.currentImg) {
    const idx = imageLisLocal.value.findIndex((t) => t === props.currentImg);
    currentLocal.value = idx >= 0 ? idx : 0;
    return;
  }

  currentLocal.value = props.current || 0;
};

const getImageList = () => {
  let list = props.imageList;
  if (props.imageItemType === 'object') {
    list = props.imageList.map((t) => t[props.imageUrlKey]);
  }
  if (props.filterNotImage) {
    imageLisLocal.value = list.filter((t) => isImage(t));
  } else {
    imageLisLocal.value = list;
  }
};

getImageList();
getCurrent();

const handleChange = (val) => {
  if (!val) {
    props.resolve();
  }
};
</script>

<style lang="less" scoped>
.modalImport {
  .down-template {
    margin-top: 20px;
    font-size: 12px;
    a {
      text-decoration: none;
      color: #2d8cf0;
    }
  }
  .tips {
    padding: 12px;
    font-size: 12px;
    color: #666;
    background: #deeffa;
  }
  .checkTips {
    padding: 12px;
    font-size: 12px;
    color: #666;
    background: #f3dfe1;
  }
}
</style>
